<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="css/bootstrap.css" />
	</head>
	<body>
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		      	<!--关闭按钮-->
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <!--弹出框标题-->
		        <h4 class="modal-title">标题</h4>
		      </div>
		      <div class="modal-body">
		        <p>内容</p>
		      </div>
		      <!--按钮功能区域-->
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		        <button type="button" class="btn btn-primary">保存修改</button>
		      </div>
		    </div><!-- /.modal-content -->
		  </div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
		<!--打开-->
		<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  			打开弹出框
		</button>
		<div class="dropdown">
		  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		           点我试试
		    <span class="caret"></span>
		  </button>
			  <ul class="dropdown-menu" aria-labelledby="dLabel">
			    ...
			  </ul>
		</div>
		<button 
			type="button" 
			class="btn btn-default" 
			data-container="body" 
			data-toggle="popover" 
			data-placement="top" 
			data-content="嘻嘻">
  			点击
		</button>
	<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
	<!-- Indicators -->
	<!--轮播图下方的控制点-->
	<ol class="carousel-indicators">
		<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
		<li data-target="#carousel-example-generic" data-slide-to="1"></li>
		<li data-target="#carousel-example-generic" data-slide-to="2"></li>
		<li data-target="#carousel-example-generic" data-slide-to="2"></li>
	</ol>

	<!-- Wrapper for slides -->
	<div class="carousel-inner" role="listbox">
		<div class="item active">
			<img src="img/360296.jpg" alt="1">
		</div>
		<div class="item">
			<img src="img/47140.jpg" alt="2">
		</div>
		<div class="item active">
			<img src="img/653040.jpg" alt="3">
		</div>
		<div class="item">
			<img src="img/986085.jpg" alt="4">
		</div>
	</div>

	<!-- Controls -->
	<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
		<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
		<span class="sr-only">Previous</span>
	</a>
	<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
		<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
		<span class="sr-only">Next</span>
	</a>
</div>
		<script src="js/jquery-2.1.0.js"></script>
		<script src="js/bootstrap.js"></script>
		<script>
			$(function () {
	  			$('[data-toggle="popover"]').popover()
			})
			$('#myModal').modal({
				'backdrop':false,//控制弹出框的背景是否出现
				'keyboard':true,
				'remote': true
			});
		</script>
	</body>
</html>
